<template>
  <div class="videoDetail">
    <div class="detail">
      <div class="top">
        <div class="left"></div>
        <div class="right">
          <el-button
            type="primary"
            v-if="state.detail.shangjia"
            @click="shelf"
            >{{ state.detail.shangjia.code == 1 ? "下架" : "上架" }}</el-button
          >
          <el-button @click="router.go(-1)">返回</el-button>
        </div>
      </div>
      <div class="head">
        <img
          v-if="state.detail.touxiang && state.detail.touxiang.length"
          :src="state.detail.touxiang[0].filePath"
          alt=""
        />
        <span class="name">{{ state.detail.nicheng }}</span>
        <span class="like">点赞：{{ state.detail.dianzanshuliang }}</span>
        <span class="collectNum"
          >收藏数：{{ state.detail.shoucangshuliang }}</span
        >
      </div>
      <video
        v-if="state.detail.shipin && state.detail.shipin.length"
        :src="state.detail.shipin[0].filePath"
        controls
      ></video>
      <div class="bottom">
        <p class="describe">描述：{{ state.detail.zhengwenmiaoshu }}</p>
        <p class="time">时间：{{ state.detail.createTime }}</p>
      </div>
    </div>
    <div class="comment">
      <span class="title">评论（{{ state.commentsTotal }}）</span>
      <div class="comment-list">
        <div
          v-for="(item, index) in state.comments"
          :key="index"
          class="comment-item"
        >
          <div class="info">
            <img v-if="item.touxiang && item.touxiang.length" :src="item.touxiang[0].filePath" alt="" />
            <span class="nickname">{{ item.nicheng }}</span>
            <div v-if="item.zuozhe && item.zuozhe.code == 1" class="author">
              作者
            </div>
          </div>
          <p class="text">{{ item.pinglunneirong }}</p>
          <span class="time">{{ item.createTime }}</span>
          <span
            class="expand"
            v-if="!item.children"
            @click="expand(item, index)"
            >查看回复</span
          >
          <div
            v-if="item.children && item.children.length > 0"
            class="comment-children"
          >
            <template v-for="(child, number) in item.children" :key="number">
              <div class="children-info">
                <img
                  v-if="child.touxiang && child.touxiang.length"
                  :src="child.touxiang[0].filePath"
                  alt=""
                />
                <span class="nickname">{{ child.nicheng }}</span>
                <div
                  v-if="child.zuozhe && child.zuozhe.code == 1"
                  class="author"
                >
                  作者
                </div>
              </div>
              <p class="text">{{ child.pinglunneirong }}</p>
              <span class="time">{{ child.createTime }}</span>
            </template>
          </div>
        </div>
      </div>
      <h-page
        v-if="state.commentsTotal"
        v-model:curr-page="state.params.current"
        :size="state.params.size"
        :total="state.commentsTotal"
        @change="GetCommentList"
      />
    </div>
  </div>
</template>
<script setup>
import { reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ShelfVideo, GetVideoDetail, GetVideoDetailComment } from "@/api/video";
import { baseMsg } from "@/utils/utils";
const route = useRoute();
const router = useRouter();
const state = reactive({
  detail: {},
  params: {
    current: 1,
    size: 10,
    spNo: "",
    plNo: "",
  },
  commentParams: {
    spNo: "",
    plNo: "",
  },
  comments: [],
  commentsTotal: 0,
});
// 获取视频详情
const GetDetail = () => {
  GetVideoDetail({ id: route.query.id }).then((res) => {
    if (res.code == 4201) {
      state.detail = res.data;
      GetCommentList();
    }
  });
};
// 获取评论列表
const GetCommentList = () => {
  state.params.spNo = state.detail.spNo;
  GetVideoDetailComment(state.params).then((res) => {
    if (res.code == 4201) {
      state.comments = res.data.records;
      state.commentsTotal = res.data.total;
    }
  });
};
// 查看活动
const expand = (item, index) => {
  state.commentParams.spNo = state.detail.spNo;
  state.commentParams.plNo = item.plNo;
  GetVideoDetailComment(state.commentParams).then((res) => {
    if (res.code == 4201) {
      state.comments[index].children = res.data.records;
    }
  });
};
const shelf = () => {
  ShelfVideo({ id: route.query.id }).then((res) => {
    if (res.code == 4202) {
      baseMsg("操作成功");
      GetDetail();
    }
  });
};
GetDetail();
const onOperation = (param, operation) => {};
</script>
<style lang="scss" scoped>
.videoDetail {
  padding: 0 100px;
  .detail {
    padding: 30px 20px;
    border-bottom: 1px solid #eaeaea;
    .top {
      display: flex;
      justify-content: space-between;
      padding: 20px 30px;
    }
    .head {
      display: flex;
      align-items: center;
      color: #333;
      font-size: 16px;
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
      .name {
        margin-left: 10px;
      }
      .like {
        margin-left: 70px;
      }
      .collectNum {
        margin-left: 30px;
      }
    }
    video {
      margin-left: 60px;
      margin-top: 10px;
      width: 500px;
    }
    .bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 30px 0 60px;
      .describe {
        color: #333;
        margin-top: 20px;
      }
      .time {
        margin-top: 20px;
      }
    }
  }
  .comment {
    padding: 30px 20px;
    .title {
      font-weight: bold;
      font-size: 24px;
      margin: 30px 56px;
      color: #333;
      position: relative;
      width: auto;
      &::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 4px;
        border-radius: 2px;
        background-color: #159bd5;
        bottom: -6px;
        left: -6px;
      }
    }
    .comment-list {
      .comment-item {
        padding: 30px 0;
        border-bottom: 1px solid #d7d7d7;
        .info {
          display: flex;
          align-items: center;
          img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
          }
          .nickname {
            margin-left: 10px;
          }
          .author {
            width: 50px;
            height: 20px;
            line-height: 20px;
            border: 1px solid #d7d7d7;
            border-radius: 20px;
            text-align: center;
            margin-left: 20px;
          }
        }
        .text {
          padding-left: 60px;
          color: #333;
        }
        .time {
          padding-left: 60px;
          padding-top: 10px;
        }
        .expand {
          margin-left: 11px;
          cursor: pointer;
          color: #159bd5;
        }
        .comment-children {
          font-size: 12px;
          margin: 20px 60px 0 60px;
          &:not(:last-child) {
            padding-bottom: 30px;
            border-bottom: 1px solid #d7d7d7;
          }
          .children-info {
            display: flex;
            align-items: center;
            img {
              width: 30px;
              height: 30px;
              border-radius: 50%;
            }
            .nickname {
              margin-left: 10px;
            }
            .author {
              width: 40px;
              height: 16px;
              line-height: 16px;
              border: 1px solid #d7d7d7;
              border-radius: 16px;
              text-align: center;
              margin-left: 20px;
            }
          }
          .text,
          .time {
            padding-left: 40px;
          }
        }
      }
    }
  }
}
</style>
